<template>
    <header>
        <router-link to="/" id="logo" title="首页">{{logo}}</router-link>
        <ul>
            <li v-for="nav in navs"><router-link :to="nav.url" :title="nav.name">{{nav.name}}</router-link></li>
        </ul>
    </header>
</template>
<script lang="ts">
import { defineComponent,ref } from 'vue'

export default defineComponent({
    props:{
        logo:{
            type:String,
            default:""
        }
    },
    setup(props,context){
        let navs=[
                {name:'菜单1',url:'/menu1'},
                {name:'菜单2',url:'/menu2'},
                {name:'菜单3',url:'/menu3'},
                {name:'关于',url:'/about'},
            ];

        return {
            navs
        }
    },
    
});
</script>

<style scoped>
header{
    width: 100%;
    overflow: hidden;
}
#logo{
    display: block;
    font-weight: 500;
    color: #563d7c;
    float: left;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}
header ul{
    float: left;
    margin: 0;
    margin-left: 50px;
}
header li{
    float: left;
    position: relative;
    display: block;
     padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}
header ul::before{
    display: table;
    content: " ";
}
</style>